<template>
  <Crumb />
  <div class="orderlist">
    <!-- 搜索 -->
    <div class="search">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        size="default"
        status-icon
      >
      </el-form>
      <header>
        <div class="header-top">
          <div class="left">
            <el-icon style="vertical-align: middle">
              <Search />
            </el-icon>
            <span>筛选搜索</span>
          </div>
          <div>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            <el-button type="primary" @click="searchOn">重新搜索</el-button>
          </div>
        </div>
        <!-- 表单 -->
        <div class="header-button">
          <el-form :inline="true" :model="ruleForm" label-width="120px">
            <el-form-item label="输入搜索 :" prop="orderSn">
              <el-input v-model="ruleForm.orderSn" placeholder="订单编号" />
            </el-form-item>
            <el-form-item label="收货人" prop="receiverName">
              <el-input
                v-model="ruleForm.receiverName"
                placeholder="收货人姓名/手机号码"
              />
            </el-form-item>
            <el-form-item label="提交时间" prop="createTine">
              <el-col :span="30">
                <el-date-picker
                  v-model="ruleForm.createTine"
                  type="date"
                  placeholder="请选择时间"
                  style="width: 100%"
                />
              </el-col>
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
              <el-select v-model="ruleForm.status" placeholder="全部">
                <el-option label="代付款" value="代付款" />
                <el-option label="代发货" value="代发货" />
                <el-option label="已发货" value="已发货" />
                <el-option label="已完成" value="已完成" />
                <el-option label="已关闭" value="已关闭" />
              </el-select>
            </el-form-item>
            <el-form-item label="订单分类" prop="promotionInfo">
              <el-select v-model="ruleForm.promotionInfo" placeholder="全部">
                <el-option label="正常订单" value="shanghai" />
                <el-option label="秒杀订单" value="beijing" />
              </el-select>
            </el-form-item>
            <el-form-item label="订单来源" prop="sourceType">
              <el-select v-model="ruleForm.sourceType" placeholder="全部">
                <el-option label="PC订单" value="shanghai" />
                <el-option label="App订单" value="beijing" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </header>
    </div>
    <!-- 数据列表 -->
    <div class="dataList">
      <el-icon style="vertical-align: middle">
        <Tickets />
      </el-icon>
      <span>数据列表</span>
    </div>

    <!-- 表格 -->
    <div>
      <el-table
        :data="TableList"
        style="width: 100%"
        border
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="state" width="50" type="selection" />
        <el-table-column prop="id" label="编号" width="80" />
        <el-table-column prop="orderSn" label="订单编号" width="150" />
        <el-table-column prop="createTime" label="提交时间" width="150">
          <template #default="scope">
            {{ formatDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="memberUsername" label="用户账号" />
        <el-table-column prop="totalAmount" label="订单金额" width="130" />
        <el-table-column prop="payType" label="支付方式" width="130">
          <template #default="scope">
            {{ (scope.row.payType = "微信") }}
          </template>
        </el-table-column>
        <el-table-column prop="sourceType" label="订单来源" width="130">
          <template #default="scope">
            {{ (scope.row.sourceType = "App订单") }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="130">
          <template #default="scope">
            {{ (scope.row.sourceType = "已关闭") }}
          </template>
        </el-table-column>
        <el-table-column prop="zip" label="操作" width="200">
          <template #default="{ row }">
            <el-button size="small" @click="lookOrder(row)">查看订单</el-button>
            <el-button type="danger" size="small" @click="delOrder"
              >删除订单</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--下面的分页 -->
    <div class="baechAndPage">
      <div class="baech">
        <el-cascader
          placeholder="批量操作"
          v-model="operations.value"
          :options="batchList"
          popper-class="cascader"
        />
        <span><el-button type="primary" @click="onSure">确定</el-button></span>
      </div>
      <div class="page">
        <el-pagination
          v-model:currentPage="pageination.currentPage"
          v-model:page-size="pageination.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageination.total"
          popper-class="pagination"
        />
      </div>
    </div>
  </div>
</template>
    
<script setup lang='ts'>
import Crumb from "@/components/Crumb/index.vue";
import { Search, Tickets } from "@element-plus/icons-vue";
import { reactive, ref } from "vue-demi";
import * as http from "@/request/api";
import { log } from "console";
import { useTable } from "@/hooks/components/useTable";
import type { FormInstance } from "element-plus";
import dayjs from "dayjs";
const rules = reactive({});
const form = reactive({
  name: "",
});

// const TableList = ref();

let ruleForm = reactive<Indexable>({
  orderSn: "",
  receiverName: "",
  createTine: "",
  status: "",
  promotionInfo: "",
  sourceType: "",
});

let {
  seachKey,
  get,
  TableList,
  pageination,
  handleSizeChange,
  handleCurrentChange,
} = useTable(http.order.getOrderList, {} as IOrderParamsType);

// 时间
function formatDate(date?: string) {
  if (!date) return "";
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
}
let obj: Indexable = {};
// 重置
const ruleFormRef = ref<FormInstance>();
const resetForm = () => {
  console.log(1234);
  seachKey(ruleForm);
};
// 搜索
const searchOn = () => {
  console.log(ruleForm);
  seachKey(obj);
};

// 数字转文字
function fromNumber() {
  // if(scope.row.payType == 2){
  // }
}

// 批量操作请求的数据
let operations = reactive({ value: "" });

// 确定
const onSure = () => {
  if (operations.value[0] == "0") {
    http.order.postOrderUpdateDelivery({
      deliveryParamList: "",
    });
  }
};
// 批量操作
const batchList = [
  {
    value: 0,
    label: "批量发货",
  },
  {
    label: "关闭订单",
    value: 1,
  },
  {
    label: "删除订单",
    value: 2,
  },
];

// 查看订单
const lookOrder = () => {
  console.log(32);
};

// 删除订单
const delOrder = () => {
  console.log(767);
};
</script>
    
<style lang="less" scoped>
.orderlist {
  padding: 20px 15px;
  margin-top: 60px;

  .search {
    padding: 20px;
    box-shadow: 0 0 20px #ccc;

    header {
      .header-top {
        display: flex;
        justify-content: space-between;

        .left span {
          padding-left: 15px;
        }
      }

      .header-button {
      }
    }
  }

  .dataList {
    margin: 30px 0;
    padding: 20px;
    box-shadow: 0 0 20px #ccc;
  }

  // 下面的分页和批量化
  .baechAndPage {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    span {
      padding-left: 20px;
    }
  }
}
</style>